// 轮播图

// 将轮播图渲染
var banner_html = '';
for(var i = 0; i < banner_img.length; i++){
    banner_html += `
        <li><a href="#"><img src="${banner_img[i].img}" alt=""></a></li>
    `
    document.querySelector('#container').innerHTML=banner_html;

}
// 轮播图绑定功能
function Banner(){
    this.index = 0;
    // DOM对象
    this.banner_wrap = document.querySelector('.banner_wrap');
    this.banner_container = document.querySelector('#container');
    this.slides = document.querySelectorAll('#container li');
    this.prev_btn = document.querySelector('#prev_btn');
    this.next_btn = document.querySelector('#next_btn');
    // 调用
    this.bandEvent();
    this.autoPlay();
}
Banner.prototype.bandEvent = function(){
    var self = this;
    // 找索引的最大值
    var max_index = self.slides.length - 1;
    // 给按钮绑定点击事件
    self.prev_btn.onclick = function(){
        if(self.index === 0){
            self.banner_container.style.left = -max_index * 1130 + 'px';
            // 跳转到倒数第二张图片
            self.index = max_index - 1;
        }else{
            self.index --;
        }
        self.changeSlides();
    }
    self.next_btn.onclick = function(){
        if( self.index === max_index){
            self.banner_container.style.left = 0;
            self.index = 1;
        }else{
            self.index ++;
        }
        self.changeSlides();
    }
}
Banner.prototype.changeSlides = function(){
    $(this.banner_container).stop().animate({
        left : -this.index * 1130
    },1000)
}
// 自动切换功能
Banner.prototype.autoPlay = function(){
    var self = this;
    // 创建定时器
    var t = setInterval(function(){
        self.next_btn.onclick();
    },2000)
    // 用户体验优化
    this.banner_wrap.onmouseover = function(){
        clearInterval(t);
    }
    this.banner_wrap.onmouseout = function(){
        clearInterval(t);
        t = setInterval(function(){
            self.next_btn.onclick();
        },2000)
    }
}
var ban = new Banner();

// 广告
var advert_html = '';
advert_img.map(item =>{
    let {img} = item;
    advert_html += `
        <li>
            <a href="#"><img src="${img}" alt=""></a>
        </li>
    `
    document.querySelector('.advert_container').innerHTML = advert_html;
})

// 卡片柜
var card_box_html = '';
for(var i = 0; i < card_data.length; i++){
    card_box_html += `
    <div class="card_box">
        <div class="card_img">
            <a href="#"><img src="${card_data[i].img}" alt=""></a>
        </div>
        <div class="card_info">
            <span><a href="#">${card_data[i].title}</a></span>
            <p>${card_data[i].tip}</p>
            <figure>
                <figcaption>${card_data[i].read}</figcaption>
                <figcaption>${card_data[i].comments}</figcaption>
                <figcaption>${card_data[i].paise}</figcaption>
            </figure>
        </div>
        <div class="card_item">
            <a href="#"><img src="${card_data[i].picture}" alt=""></a>
            <span><a href="#">${card_data[i].panName}</a></span>
            <span>${card_data[i].times}</span>
        </div>            
    </div> `
    document.querySelector('.card_wrap').innerHTML = card_box_html;
}
/* banner card wrap */
var banner_card_html = ''
banner_card_data.forEach(item =>{
    let {img} = item;
    let {title} = item;
    banner_card_html += `
    <li>
        <a title="${title}" href="">
            <img src="${img}" alt=""></a>
        <a title="${title}" href="">
            <span>${title}</span>
        </a>
    </li>
    `
    document.querySelector(".banner_card_container").innerHTML = banner_card_html;
})
// 卡片轮播图绑定事件
function Banner_card (){
    this.index = 0;
    // DOM对象
    this.banner_card_container = document.querySelector('.banner_card_container');
    this.banner_card_btn = document.querySelector('#banner_card_btn');
    this.BindEvent();
}
// 功能
Banner_card.prototype.BindEvent = function(){
    var self = this;
    this.banner_card_btn.onclick = function(){
        self.banner_card_container.style.left = - self.index * 1130 + 'px';
        self.index++;
        if(self.index === 3){
            return self.index = 0;
        }
    }
}
var ban_card = new Banner_card();

// 回到顶部
// function BackTop(){
//     this.oBody = document.querySelector('#body');
//     this.back_wrap = document.querySelector('.back_wrap');
//     this.back_top = document.querySelector('.back_top');
//     this.BindEvent();
//     console.log(this.oBody);
// }
// BackTop.prototype.BindEvent = function(){
//     var self = this;
//     window.onload = function(e){
//         var e = e || event;
//         // 获取滚动的高度
//         let oBody_height = self.oBody.offsetTop;
//     }
// }
// var backtop = new BackTop();
